<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page contentType="text/html; charset=UTF-8" deferredSyntaxAllowedAsLiteral="true"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="<%=basePath%>">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0"> 
	<link rel="stylesheet" type="text/css" href="css/jquery-ui/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/jbpmDesign/style.css" rel="stylesheet" />
	<script type="text/javascript" src="js/raphael/raphael-min.js"></script>
	<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/json/jquery.json-2.3.min.js"></script>
	<script type="text/javascript" src="js/jbpmDesign/myflow.js"></script>
	<script type="text/javascript" src="js/jbpmDesign/myflow.jpdl4.js"></script>
	<script type="text/javascript" src="js/jbpmDesign/myflow.editors.js"></script>
	<script type="text/javascript" src="js/jbpmDesign/myflow.jsonToXml.js"></script>
	<script type="text/javascript">
	var ie = (typeof window.ActiveXObject != "undefined") ; 
	if (ie)
	{ 
		alert("提示:如果显示错误,请使用360或谷歌浏览器");							 										 
	}
/*	
	var sourceData ={
    "states": {
        "rect1": {
            "attr": {
                "height": 48, 
                "width": 48, 
                "x": 319, 
                "y": 11
            }, 
            "type": "start", 
            "text": {
                "text": "start1"
            }, 
            "props": {
                "text": {
                    "value": "start1"
                }
            }
        }, 
        "rect2": {
            "attr": {
                "height": 52, 
                "width": 92, 
                "x": 297, 
                "y": 114
            }, 
            "type": "task", 
            "text": {
                "text": "申请"
            }, 
            "props": {
                "text": {
                    "value": "申请"
                }
            }, 
            "assignee": "#{owner}", 
            "form": "request.jsp"
        }, 
        "rect3": {
            "attr": {
                "height": 52, 
                "width": 92, 
                "x": 303, 
                "y": 227
            }, 
            "type": "task", 
            "text": {
                "text": "经理审批"
            }, 
            "props": {
                "text": {
                    "value": "经理审批"
                }
            }, 
            "assignee": "manager", 
            "form": "manager.jsp"
        }, 
        "rect4": {
            "attr": {
                "height": 52, 
                "width": 92, 
                "x": 437, 
                "y": 399
            }, 
            "type": "task", 
            "text": {
                "text": "老板审批"
            }, 
            "props": {
                "text": {
                    "value": "老板审批"
                }
            }, 
            "assignee": "boss", 
            "form": "boss.jsp"
        }, 
        "rect5": {
            "attr": {
                "height": 48, 
                "width": 48, 
                "x": 325, 
                "y": 335
            }, 
            "type": "decision", 
            "text": {
                "text": "exclusive1"
            }, 
            "props": {
                "text": {
                    "value": "exclusive1"
                }
            }, 
            "expr": "#{day>3?'老板审批':'结束'}"
        }, 
        "rect6": {
            "attr": {
                "height": 48, 
                "width": 48, 
                "x": 325, 
                "y": 459
            }, 
            "type": "end", 
            "text": {
                "text": "end1"
            }, 
            "props": {
                "text": {
                    "value": "end1"
                }
            }
        }
    }, 
    "paths": {
        "path1": {
            "from": "rect1", 
            "to": "rect2", 
            "text": {
                "text": ""
            }, 
            "dots": [ ]
        }, 
        "path2": {
            "from": "rect2", 
            "to": "rect3", 
            "text": {
                "text": ""
            }, 
            "dots": [ ]
        }, 
        "path3": {
            "from": "rect3", 
            "to": "rect2", 
            "text": {
                "text": "驳回"
            }, 
            "dots": [
                {
                    "x": 258, 
                    "y": 247
                }, 
                {
                    "x": 256, 
                    "y": 149
                }
            ], 
            "textPos": {
                "x": -42, 
                "y": -18
            }
        }, 
        "path4": {
            "from": "rect3", 
            "to": "rect5", 
            "text": {
                "text": "批准"
            }, 
            "dots": [ ], 
            "textPos": {
                "x": -43, 
                "y": -7
            }
        }, 
        "path5": {
            "from": "rect5", 
            "to": "rect4", 
            "text": {
                "text": "老板审批"
            }, 
            "dots": [
                {
                    "x": 481, 
                    "y": 358
                }
            ], 
            "textPos": {
                "x": -74, 
                "y": -29
            }
        }, 
        "path6": {
            "from": "rect5", 
            "to": "rect6", 
            "text": {
                "text": "结束"
            }, 
            "dots": [ ], 
            "textPos": {
                "x": -42, 
                "y": -18
            }
        }, 
        "path7": {
            "from": "rect4", 
            "to": "rect6", 
            "text": {
                "text": ""
            }, 
            "dots": [ ], 
            "textPos": {
                "x": 482, 
                "y": 480
            }
        }
    }, 
    "props": {
        "props": {
            "name": {
                "value": "leave"
            }
        }
    }
};
	var restoreData =  	{
    "states": {
        "rect1": {
            "type": "start", 
            "text": {
                "text": "开始"
            }, 
            "attr": {
                "x": 409, 
                "y": 10, 
                "width": 50, 
                "height": 50
            }, 
            "props": {
                "text": {
                    "value": "开始"
                }
            }
        }
    }, 
    "paths": {

    }, 
    "props": {

    }
};
*/
	var sourceData ={};
	var restoreData ={};	
//save相关的方法-start
	function myflowSendXml(key,objs){
		var xml = myflowJsonToXml(objs);
		$( "#dialog-processing" ).dialog( "open" );
		$.post(
			"JbpmDesign.servlet",
			{"key":key,"xml":xml},
				function(data){
					if(data.state=="success"){
						$( "#dialog-processing" ).dialog( "close" );
						alert("保存成功");					
					}
			},
		"json");
	}
	
	function myflowGetPropsKey(objs){
		var key=objs.props.props.key.value;
		return key;
	}
	
	function myflowCheckUniqueTask(objs){
		for (var rect1 in objs.states){
			var recttype1 =objs.states[rect1].type;
			var recttext1 =objs.states[rect1].text.text; 
			if(recttype1=="task"){
				for (var rect2 in objs.states){
					var recttype2 =objs.states[rect2].type;
					var recttext2 =objs.states[rect2].text.text;
					if(recttype2=="task"){
						if(rect1!=rect2 && recttext1==recttext2){
							return false;
						}
					}
				}				
			}
		}
		return true;	
	}
//save相关的方法-end	
	$(function() {
	//1.myflow	
		$('#myflow')
				.myflow(
						{
							basePath : "",
							restore : sourceData,
							tools : {
								save : {
									onclick : function(data) {
											var objs = eval( "(" + data + ")" );
											var uniqueTask = myflowCheckUniqueTask(objs);
											if(uniqueTask==false){
												alert("请确保任务(task)节点唯一!");
												return;
											}
											var key = myflowGetPropsKey(objs);
											if(key==""){
												$( "#dialog-form" ).data("objs",objs);
												$( "#dialog-form" ).dialog( "open" );
											}else{
									        	myflowSendXml(key,objs);									  
											}
									}
								},
								preview :{
									onclick : function(data){
										var objs = eval( "(" + data + ")" );									
										alert(myflowJsonToXml(objs));
									}
								}
							}
						});
		//2.dialog				
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
		var key = $( "#dialog-from-props-key" ),
			allFields = $( [] ).add( key ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( n + "的长度在" +
					min + " 和 " + max + "之间." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		$( "#dialog-processing" ).dialog({
			autoOpen: false,
			height: 200,
			width: 350,
			modal: true,
			buttons: {},
			close: function() {}
		});
		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 200,
			width: 350,
			modal: true,
			buttons: {
				"确定": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );
					bValid = bValid && checkLength( key, "标识(key)", 3, 50 );
					bValid = bValid && checkRegexp( key, /^[a-z]([0-9a-z_])+$/i, "标识(key)应该由 a-z, 0-9,组成,并以字母开头." );
					if ( bValid ) {
					    var objs = $(this).data("objs");
					    objs.props.props.key.value = key.val();
					    objs.props.props.name.value = key.val();
					    myflowSendXml(key.val(),objs);
						$( this ).dialog( "close" );
					}
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
		});
	</script>
</head>
<body> 
  <div id="myflow_tools" style="position: absolute; top: 10; left: 10; background-color: #fff; width: 70px; cursor: default; padding: 3px;" class="ui-widget-content"> 
   <div id="myflow_tools_handle" style="text-align: center;" class="ui-widget-header"> 
    工具集 
   </div> 
   <div class="node" id="myflow_save">
    <img src="img/jbpmDesign/save.gif" />&nbsp;&nbsp;保存
   </div>
   <div class="node" id="myflow_preview">
    <img src="img/jbpmDesign/16/swimlane.gif" />&nbsp;&nbsp;预览
   </div> 
   <div> 
    <hr /> 
   </div> 
   <div class="node selectable" id="pointer">
    <img src="img/jbpmDesign/select16.gif" />&nbsp;&nbsp;选择
   </div> 
   <div class="node selectable" id="path">
    <img src="img/jbpmDesign/16/flow_sequence.png" />&nbsp;&nbsp;转换
   </div> 
   <div> 
    <hr /> 
   </div> 
   <div class="node state" id="start" type="start">
    <img src="img/jbpmDesign/16/start_event_empty.png" />&nbsp;&nbsp;开始(start)
   </div>
   <div class="node state" id="task" type="task">
    <img src="img/jbpmDesign/16/task_empty.png" />&nbsp;&nbsp;任务(task)
   </div>
   <div class="node state" id="decision" type="decision">
    <img src="img/jbpmDesign/16/gateway_exclusive.png" />&nbsp;&nbsp;决定(decision)
   </div> 
   <div class="node state" id="foreach" type="foreach">
    <img src="img/jbpmDesign/16/gateway_parallel.png" />&nbsp;&nbsp;分发(foreach)
   </div> 
   <div class="node state" id="join" type="join">
    <img src="img/jbpmDesign/16/gateway_parallel.png" />&nbsp;&nbsp;合并(join)
   </div> 
   <div class="node state" id="end" type="end">
    <img src="img/jbpmDesign/16/end_event_terminate.png" />&nbsp;&nbsp;结束(end)
   </div>
  </div>
   
  <div id="myflow_props" class="ui-widget-content"> 
   <div id="myflow_props_handle" class="ui-widget-header">
    属性
   </div> 
   <table border="1" width="100%" cellpadding="0" cellspacing="0"> 
    <tbody>
     <tr> 
      <td>aaa</td> 
     </tr> 
     <tr> 
      <td>aaa</td> 
     </tr> 
    </tbody>
   </table> 
   <div>
    &nbsp;
   </div> 
  </div> 
  <div id="myflow"></div>
  
  
  <div id="dialog-form" title="填写流程标识(key)">
	<p class="validateTips">注意:标识(key)由字母数字组成,并以字母开头.</p>
	<form>
	<fieldset>
		<label for="name">标识(key)</label>
		<input type="text" name="key" id="dialog-from-props-key" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
  </div>
  
  <div id="dialog-processing" title="注意">
	<p class="validateTips">注意:请等待,正在处理中...</p>
  </div>
 </body>
</html>